<!--
 * @Author: 'Chenfarry' '2925102113@qq.com'
 * @Date: 2024-07-22 11:20:44
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2024-11-20 15:29:13
 * @FilePath: \orderApp\pages\home\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="page">
{
  layout: "default",
  style: {
    navigationStyle: "custom",
    navigationBarTextStyle: "white",
    disableScroll: true, //禁止ios系统下拉
  },
}
</route>
<template>
  <view class="personBox">
    <view class="fixedBox" :style="{ '--top': top + 'px' }">
      <view class="titcss">首页</view>
    </view>
    <view class="personBox-bg">
      <image
        object-fit="contain"
        style="width: 100%; height: 100%"
        :src="baseIMGURL + 'home.png'"
      ></image>
    </view>

    <view class="wrap" :style="{ '--top': top + 'px' }">
      <view class="main-box">
        <!-- 菜单 -->
        <uv-sticky :offset-Top="offsetTop">
          <Menu></Menu>
        </uv-sticky>
        <uv-gap height="16rpx" bgColor="#F3F3F4"></uv-gap>
        <!-- 食谱区域 -->
          <Dishes></Dishes>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import Menu from "./components/menu.vue";
import Dishes from "./components/dishes.vue";
import { useUserStore } from "@/store";

const { top } = useUserStore().pinia_SafeVal;

// 图片基地址
const baseIMGURL = import.meta.env.VITE_IMG_BASEURL;
const userStore = useUserStore();

const offsetTop = ref(userStore.pinia_SafeVal.top + 44);

onMounted(() => {});
</script>
<style>
page {
  background: #fff !important;
  /* overflow: hidden; */
}
</style>
<style scoped lang="scss">
.personBox {
  width: 100%;
  height: 100vh;
  position: relative;

  .fixedBox {
    width: 100%;
    // height: var(--top);
    background: #4dd1c0;
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    padding-top: var(--top);
    .titcss {
      height: 44px;
      line-height: 44px;
      font-family: PingFang SC, PingFang SC;
      font-size: 33rpx;
      text-align: center;
      font-weight: 500;
      color: #fff;
    }
  }

  &-bg {
    width: 100%;
    height: 450rpx;
    position: fixed;
    top: 0;
  }

  .wrap {
    padding: var(--top) 0 0;
    position: relative;
  
  }
}

.main-box {
  width: 100%;
  margin-top: calc(240rpx + 44px);
}
</style>
